<template>
  <div>
    <el-dialog title="人员详情" :visible.sync="dialogTableVisible" width="30%" @close="closeFn">
      <div class="header">
        <el-row>
          <el-col :span="8"><div class="grid-content bg-purple"><span>人员名称：{{ data.userName }}</span></div></el-col>
          <el-col :span="8"><div class="grid-content bg-purple-light"><span>角色：{{ data.roleName }}</span></div></el-col>
          <el-col :span="8"><div class="grid-content bg-purple"><span>联系电话：{{ data.mobile }}</span></div></el-col>
          <el-col :span="8"><div class="grid-content bg-purple" style="margin-top: 15px"><span>负责区域：{{ data.regionName }}</span></div></el-col>
        </el-row>
      </div>
      <el-table :data="gridData" :border="true" style="width: 525px;">
        <el-table-column property="type" width="110" align="center" />
        <el-table-column property="total" label="总工单数" width="110" align="center" />
        <el-table-column property="cancelCount" label="拒绝工单" width="104" align="center" />
        <el-table-column property="workCount" label="完成工单" width="100" align="center" />
        <el-table-column property="progressTotal" label="进行中工单" width="100" align="center" />
      </el-table>
    </el-dialog>

  </div>
</template>

<script>
import { getPeopleDetail, getUserWorkDetail } from '@/api/peoplemanger'
export default {
  props: {
    currentId: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      gridData: [],
      dialogTableVisible: false,
      queryObj: {
        userId: '',
        start: this.$moment().subtract('1', 'd').format('YYYY-MM-DD 00:00:00'),
        end: this.$moment().format('YYYY-MM-DD 23:59:59')
      },
      week: {},
      mounth: {},
      year: {},
      data: {}
    }
  },
  created() {
  },
  methods: {
    async getWorkDetail() {
      this.queryObj.userId = this.currentId
      const data = await getPeopleDetail(this.currentId)
      const week = await getUserWorkDetail(this.queryObj)
      this.queryObj.start = this.$moment().format('YYYY-MM-01 00:00:00')
      const mounth = await getUserWorkDetail(this.queryObj)
      this.queryObj.start = this.$moment().format('YYYY-01-01 00:00:00')
      const year = await getUserWorkDetail(this.queryObj)
      this.week = week
      this.mounth = mounth
      this.year = year
      this.data = data
      this.gridData = [
        { type: '本周', total: week.total, cancelCount: week.cancelCount, workCount: week.workCount, progressTotal: week.progressTotal },
        { type: '本月', total: mounth.total, cancelCount: mounth.cancelCount, workCount: mounth.workCount, progressTotal: mounth.progressTotal },
        { type: '本年', total: year.total, cancelCount: year.cancelCount, workCount: year.workCount, progressTotal: year.progressTotal }
      ]
    },
    closeFn() {
      this.dialogTableVisible = false
    },
    DialogOpen() {
      this.dialogTableVisible = true
    }
  }
}
</script>

<style scoped lang='scss'>
::v-deep .el-dialog__title {
  font-size: 16px;
  font-weight: 600;
}
.header {
  // background-color: pink;
  width: 98%;
  height: 86px;
  background: #f3f6fb;
  padding: 19px 19px 0;
  margin-bottom: 20px;
}
::v-deep .el-dialog__body {
  padding-top: 20px;
}
</style>
